<template>
  <div class="download-button-content">
    <el-button
      v-if="roundFlag"
      type="info"
      :size="size"
      round
      @click.stop="downloadFile"
      :loading="loading"
    >
      下载<i class="el-icon-download el-icon--right" />
    </el-button>
    <el-button
      v-if="circleFlag"
      type="info"
      :size="size"
      circle
      @click.stop="downloadFile"
      :loading="loading"
    >
      <i class="el-icon-download" />
    </el-button>
    <el-tooltip v-if="textFlag" effect="dark" content="下载" placement="top">
      <el-button
        type="text"
        :size="size"
        circle
        @click.stop="downloadFile"
        :loading="loading"
      >
        <i class="el-icon-download" />
      </el-button>
    </el-tooltip>
    <a href="javascript:;" v-if="liFlag" @click.stop="downloadFile">
      <i class="el-icon-download"></i>下<span style="visibility: hidden"
        >下</span
      >载
    </a>
  </div>
</template>

<script>
import panUtil from '../../../utils/common'
import { getToken } from '../../../utils/cookie'
import { mapGetters, mapMutations } from 'vuex'

export default {
  name: 'DownLoadButton',
  components: {},
  props: {
    roundFlag: Boolean,
    circleFlag: Boolean,
    textFlag: Boolean,
    liFlag: Boolean,
    size: String,
    item: Object,
  },
  data() {
    return {
      loading: false,
    }
  },
  methods: {
    ...mapMutations({
      reloadSelection: 'file/setMultipleSelection',
      setContextMenuVisible: 'file/setContextMenuVisible',
    }),
    downloadFile() {
      let _this = this
      if (
        !_this.item &&
        (!_this.multipleSelection || _this.multipleSelection.length === 0)
      ) {
        _this.$message.error('请选择要下载的文件')
        return
      }
      if (!_this.item) {
        for (
          let i = 0, iLength = _this.multipleSelection.length;
          i < iLength;
          i++
        ) {
          if (_this.multipleSelection[i].folderFlag === 1) {
            _this.$message.error('文件夹暂不支持下载')
            _this.setContextMenuVisible(false)
            return
          }
        }
        _this.doDownLoads(_this.multipleSelection)
      }
      if (_this.item) {
        if (_this.item.folderFlag === 1) {
          _this.$message.error('文件夹暂不支持下载')
          _this.setContextMenuVisible(false)
          return
        }
        _this.doDownload(_this.item)
      }
      if (_this.$parent.contextMenuVisible) {
        _this.$parent.contextMenuVisible = false
      }
      // console.log(_this.$parent)
      // this.reloadSelection(new Array())
      // _this.$parent.clearSelect()
    },
    doDownload(item) {
      let url = `${panUtil.getUrlPrefix()}/file/download?fileId=${
          item.fileId
        }&fileSizeDesc=${item.fileSizeDesc}&userName=${
          this.username
        }&authorization=${getToken()}`,
        filename = item.filename,
        link = document.createElement('a')
      // console.log(url)
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download', filename)
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    },
    doDownLoads(items, i) {
      let _this = this
      if (!i) {
        i = 0
      }
      if (items.length === i) {
        return
      }
      setTimeout(function () {
        _this.doDownload(items[i])
        i++
        _this.doDownLoads(items, i)
      }, 500)
    },
  },
  computed: {
    ...mapGetters(['multipleSelection', 'username']),
  },
  mounted() {},
  watch: {},
}
</script>

<style lang="scss">
.download-button-content {
  display: inline-block;
  margin-right: 10px;
  .el-button--text {
    color: #fff;
    &:hover {
      color: rgba($color: #fff, $alpha: 0.6);
    }
  }
}
</style>
